<template>
    <div class="new-graph file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form">
                    <div class="form-item">
                        <div class="label">仿真工程名称</div>
                        <!-- <pui-input placeholder="请输入仿真工程名称" v-model="componentRef.graphName" type="input" clearAble full></pui-input> -->
                        <div class="select-content">
                            <input type="text" placeholder="请输入仿真工程名称" class="pui-input input" v-model="componentRef.graphName" @input="onGraphNameInput">
                            <pui-selector :dataList="componentRef.fileTypeList" v-model="componentRef.projectType"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">保存路径</div>
                        <pui-input disabled :placeholder="componentRef.dirPath" v-model="componentRef.dirPath" type="input" full icon="folder-open" iconPosition="right" @onIconClick="openFolderBrowser"></pui-input>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="createNewGraph">创建</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'NewGraph'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { graphManager } from '@/services/phot_client/graph'
import { projectManager } from '@/services/phot_client/project'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '新建仿真工程'
    },
    animate: {
        type: String,
        default: 'fade'
    },
    directoryPath: {
        type: String,
        default: './photlab'
    }
})
const emit = defineEmits({
    openFolderBrowser: (val: any) => {},
    onClose: (val: any) => {},
    sendGraphData: (val: any) => {},
    sendProjectData: (val: any) => {},
})
const componentRef = reactive({
    dialogVisible: false,
    graphName: 'phot-system-',
    projectType: 0, // 0 系统仿真 1 器件仿真
    address: './photlab',
    curIdx: 1,
    dirPath: '',
    fileTypeList: [
        { label: '.phtg', value: 0 },
        { label: '.phtd', value: 1 },
    ],
}) as any
watch([() => props.directoryPath],(v1) => {
    // console.log(v1)
    componentRef.dirPath = props.directoryPath + (componentRef.graphName ? '/' + componentRef.graphName : '')
})
const onGraphNameInput = async (e: any) => {
    componentRef.dirPath = props.directoryPath + (componentRef.graphName ? '/' + componentRef.graphName : '')
}
const init = async () => {
    componentRef.graphName = 'phot-system-' + componentRef.curIdx
    componentRef.dirPath = props.directoryPath + (componentRef.graphName ? '/' + componentRef.graphName : '')
    console.log(componentRef.graphName)
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const createNewGraph = async () => {
    try {
        await graphManager.newGraph(componentRef.graphName)
        await graphManager.saveGraphAs(componentRef.dirPath + '/' + componentRef.graphName + '.phtg')
        // const res: any = await projectManager.newProject(props.directoryPath + '/' + componentRef.graphName, componentRef.graphName, componentRef.projectType)
        // const project: any = await projectManager.openProject(props.directoryPath + '/' + componentRef.graphName)
        // console.log(res)
        // await emit('sendProjectData', {name: componentRef.graphName, path: props.directoryPath + '/' + componentRef.graphName + '/' + componentRef.graphName + '.phtg'})
        emit('sendGraphData', {name: componentRef.graphName, path: componentRef.dirPath + '/' + componentRef.graphName + '.phtg', graphId: graphManager.photGraph.graphId, uid: graphManager.graphId})
        componentRef.curIdx++
        closeDialog()
    } catch (err: any) {
        proxy.$toast({
            value: '工程名称或已存在，请检查工程名称',
            type: 'error'
        })
    }
}
const openFolderBrowser = () => {
    emit('openFolderBrowser', 'new graph')
}
defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>